<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>登录</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/a3common.css" rel="stylesheet">
    <link rel="stylesheet" href="css/login.css">
    <link rel="stylesheet" href="css/font_43459_lbtux0zjkr6yldi.css">
    <script type="application/javascript" src="js/jquery-3.6.0.min.js"></script>
    <script type="application/javascript" src="js/bootstrap.min.js"></script>
</head>

<body>
    <div id="main" class="main-warp">
        <div class="main-content">
            <div class="formDiv">
                <h2 class="text-center">登录入口</h2>
                <span style="color:red;">{{errorMsg}}</span>
                <form id="loginForm">
                    <div class="dataform">
                        <div class="input-warp gap">
                            <span class="input-icon iconfont icon-yonghu1"></span>
                            <input id="userName" type="text" class="inputs" 
                            placeholder="请输入手机号/工号1001"
                                maxlength="64" v-model="phoneOrNo">
                        </div>

                        <div class="input-warp gap">
                            <span class="input-icon iconfont icon-baomi"></span>
                            <input class="inputs" type="password" name="password" 
                            placeholder="请输入密码123456" id="password"
                                maxlength="20" v-model="pass">
                        </div>

                        <div class="btn-warp gap">
                            <div class="text-center">
                                <button id="btnLogin" type="button" class="btn btn-block lgbtn blue" @click="userLogin">登录</button>
                            </div>
                        </div>
                        <div class="gap">
                            <div class="pull-right" style="margin-top: 6px">
                                <a href="javascript:;" class="link">忘记密码?</a>
                                <!-- <span class="split-space">|</span>
                                <a href="/page/user/register.html" class="link">新用户注册</a> -->
                            </div>
                            <div class="pretty-box">
                                <input type="hidden" value="1" name="remember" id="remember" class="">
                                <label for="remember" style="font-weight: normal"></label>
                            </div>
                        </div>
                        <!-- <div class="biggap third-party-title">
                            <h5 class="text-center"><span>第三方账号登录</span></h5>
                        </div> -->
                        <!-- <div class="third-auth">
                            <a title="用钉钉登录" class="dt" href="javascript:;"></a>
                            <a title="用微信账户登录" class="wx" href="javascript:;"></a>
                            <a title="用QQ账户登录" class="qq" href="javascript:;"></a>
                        </div> -->
                    </div>
                </form>
            </div>
        </div>
    </div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.10/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.5.0/axios.js"></script>
<script>
    let vue = new Vue({
        el:"#main",
        data:{
            phoneOrNo:"",
            pass:"",
            errorMsg:"",
        },
        methods:{
            userLogin(){
                //发起异步请求
                //axios.get('url','参数')
                axios.get('http://127.0.0.1:9000/api/user/login',{
                    params:{
                        phoneOrNo:this.phoneOrNo,
                        pass:this.pass,
                    }
                })
                .then(response => {
                    //response就是服务器响应或者返回的数据
                    //console.log("成功回调的结果:");
                    //console.log(response.data);

                    let {status,mag,data}=response.data;
                    if(status=="200"){
                        //成功登录

                        //第1种方式 传输数据
                        //let{userTrueName,userImage}=data;//console.log(data);
                        // //页面跳转
                        //location.replace("/page/index.html?name="+encodeURIComponent(userTrueName)+"&image="+encodeURIComponent(userImage));
                        
                        //第2种方式 将数据存储缓存 locaStorage 进行数据传输
                        let {userTrueName,userImage,id}=data;
                        //将数据转换成json数据字符串储存
                        let userObj={name:userTrueName,image:userImage,id:id};
                        localStorage.setItem("loginUserInfo",JSON.stringify(userObj));
                        location.replace("/page/index.html")
                    }else{
                        this.errorMsg=mag;
                        this.phoneOrNo="";
                        this.pass="";
                    }
                })
                    .catch(err => {
                    console.error(err); 
                })
            }
        },
    });
</script>
</body>

</html>